@import '../../styles/global.less';
.k-radio-group {
  display: inline-block;
  font-size: 0;
  // vertical-align: middle;
  white-space: nowrap;
  .k-btn {
    position: relative;
    margin-left: -1px !important;
    z-index: 0;
    border-radius: 0;
    &:focus {
      z-index: 2;
    }
    &:first-child {
      border-top-left-radius: @radius;
      border-bottom-left-radius: @radius;
    }
    &:last-child {
      border-top-right-radius: @radius;
      border-bottom-right-radius: @radius;
    }
  }
  .k-btn-primary.k-btn-hollow {
    z-index: 1;
    color: @main;
    border-color: @main;
  }
}

.k-radio-cirle {
  .k-btn:first-child {
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
  }
  .k-btn:last-child {
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
  }
}

.k-radio-wrapper {
  user-select: none;
  cursor: pointer;
  font-size: 12px;
  display: inline-block;
  line-height: 1;
  .k-radio {
    display: inline-block;
    vertical-align: middle;
    white-space: nowrap;
    cursor: pointer;
    outline: 0;
    line-height: 1;
    position: relative;
    margin: 0;
    font-size: 0;
    .k-radio-inner {
      box-sizing: content-box;
      display: inline-block;
      width: 14px;
      height: 14px;
      position: relative;
      top: 0;
      left: 0;
      border: 1px solid @border-color;
      border-radius: 2px;
      background-color: #fff;
      transition: border-color .2s ease-in-out, background-color .2s ease-in-out;
      border-radius: 50%;
      &:after {
        box-sizing: content-box;
        width: 4px;
        height: 4px;
        position: absolute;
        left: 5px;
        top: 5px;
        border-radius: 6px;
        display: block;
        content: " ";
        opacity: 0;
        background-color: @main;
        transition: all .2s ease-in-out;
      }
    }
    .k-radio-input {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 1;
      cursor: pointer;
      opacity: 0;
      &:focus {
        +.k-radio-inner {
          border: 1px solid @main;
          box-shadow: 0 0 5px fade(@main, 75%);
        }
      }
    }
  }
  .k-radio-checked {
    .k-radio-inner {
      background: #fff;
      border-color: @main;
      position: relative;
      &:after {
        opacity: 1;
        width: 8px;
        height: 8px;
        left: 3px;
        top: 3px;
      }
    }
  }
  .k-radio-label {
    padding: 0 8px;
  }
}

.k-radio-disabled {
  cursor: not-allowed;
  // opacity: .5;
  color: @disable-color;
  .k-radio {
    .k-radio-input {
      cursor: not-allowed;
    }
    .k-radio-inner {
      background: @disable-back;
      border-color: @disable-border;
      &:after {
        background-color: @disable-border;
      }
    }
  }
}